<h2>Widget: Progress bar</h2>
<p>
  To create a circular progress bar, add <code>role="progressbar"</code> to an HTML element. Also, 
  inline add a CSS variable with the target value: <code>style="--value: 66"</code>.
</p>
<p>To make it more accessible, add some ARIA attributes:</p>
<ul>
  <li><code>aria-valuenow</code>: The value of the progress bar.</li>
  <li><code>aria-valuemin</code>: The minimum value of the progress bar.</li>
  <li><code>aria-valuemax</code>: The maximum value of the progress bar.</li>
</ul>
<p>
  You can specify how the thickness of the progress bar by setting the <code>--thickness</code>
  custom property to one of these values: <code>var(--thick)</code>, <code>var(--medium)</code> (default),
  or <code>var(--thin)</code>.
</p>

<section>
  <h4>Demos</h4>
  <div style="display:flex; gap: 2rem;">
    <div role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="--value: 33"></div>
    <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--value: 50; --thickness: var(--thick)"></div>
    <div role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="--value: 66; --thickness: var(--medium)"></div>
    <div role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="--value: 90; --thickness: var(--thin)"></div>
  </div>

  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;div role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="--value: 33"&gt;&lt;/div&gt;
&lt;div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--value: 50; --thickness: var(--thick)"&gt;&lt;/div&gt;
&lt;div role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="--value: 66; --thickness: var(--medium)"&gt;&lt;/div&gt;
&lt;div role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="--value: 90; --thickness: var(--thin)"&gt;&lt;/div&gt;</code></pre>
  </details>
</section>